// 精品推荐
import React from 'react'
import { PlusCircleFilled, LeftOutlined, RightOutlined, ArrowRightOutlined, EyeOutlined } from '@ant-design/icons';
import Recoss from '../../components/Reco/Recoss'
import RecoCarousel from '../../components/Reco/RecoCarousel'
import { options,adList,todayRecommendedList } from '../../data/Tool'
function Recommended() {
  return (
    <div className='Recomm'>
        {/*头部搜索框  */}
        <Recoss options={options}/>
        {/* 轮播图 */}
        <RecoCarousel/>
        {/* 导航 */}
        <div className='Recom_Navigation'>
             <div className='Navigation'>
                {
                  adList.map((item:any)=>(
                     <img src={item} key={item} alt="" style={{width:'180px'}} />
                  ))
                }
             </div>
        </div>
        {/* 今日推荐 */}
        <div className='Todaysrecommendation'>
             <div className='Todaysrecommendation_Navigation'>
                 <div>
                   <h2>今日推荐</h2>
                   <a href="" style={{color:'#f0070f'}}>开通会员免费使用</a>
                   <ul>
                    {
                       todayRecommendedList.map((item:any)=>(
                          <span key={item}>{item.title}</span>
                       ))
                    }
                   </ul>
                 </div>
                 <p>查看更多&gt;</p>
             </div>
             <div className='Todaysrecommendation_tab_Navigation_show'>
                  <div className='Todaysrecommendation_tab_Navigation_show_create'>
                      <div>
                          <PlusCircleFilled style={{fontSize:'50px',color:'#f0070f'}}/>
                          <h4>空白创建</h4>
                      </div>
                      <img src="../../../public/image/createAd.webp" alt="" />
                  </div>
             </div>
        </div>
        {/* 广告 */}
        <img src="../../../public/image/homeAd.webp" alt="" style={{borderRadius:'10px'}} />
    </div>
  )
}

export default Recommended